<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column h3")
            div(class="flex-column-item flex-row")
                div(class="flex-row-item flex-center-center flex-7") ----设置菜单----
                div(class="flex-row-item right") {{activeId+1}}
            div(class="flex-column-item flex-center flex-3") 
                div(class="flex-row")
                    div(class="flex-row-item flex-4",style="height:100%")
                        div(class="flex-column")
                            div(class="flex-column-item flex-center" v-for="(menu,index) in currentPageMenus") 
                                span(class="iconfont",:style="{'visibility': index == currentMenuIndex ? 'visible' : 'hidden'}") &#xe62c;
                                span {{menu.name}}
                    div(class="flex-row-item right",style="height:100%")
                        control-line(:total="menus.length",:current="activeId",style="float:right;")
</template>

<script>
    import MenuListMixins from "@/mixins/MenuList.js";

    export default {
        mixins:[MenuListMixins],
        data() {
            return {
            };
        },
        computed: {
            menus() {
                var menus = [
                    {name: "时间设置", id: 0, to: "time"},
                    {name: "闹铃设置", id: 2, to: "ring"},
                    {name: "警示设置", id: 1, to: "warning"},
                    {name: "恢复出厂设置", id: 5, to: 'reset'}
                ];
                return menus;
            },
        },
        methods: {
            up() {
                this.activeId --;
            },
            down() {
                this.activeId ++;
            },

            back() {
                this.$router.push("/menu?index=4");
            },
            yes() {
                this.$router.push(this.currentMenu.to);
            }
        }
    };
</script>

<style lang="less">
</style>
